import style from './index.less';
import { Tag, Button } from 'antd';
import ProCard from '@ant-design/pro-card';
import Graphin from '@antv/graphin';
import parser from './parser';
import '@antv/graphin-icons/dist/index.css';

const OpinionDetail = (props) => {
  const { text: article } = props.location.state;
  return (
    <ProCard direction="row" ghost gutter={8} >
      <ProCard colSpan={14} style={{ borderRadius: '8px', height: '88vh' }}>
        <div style={{ marginBottom: '1rem', display: 'flex', justifyContent: 'space-between' }}>
          <h1
            style={{
              fontWeight: 'bold',
              marginBottom: '0.25rem',
              lineHeight: '30px',
              width: '85%',

            }}
          >
            {article.title}
          </h1>
          <Button type="primary" onClick={() => history.back()}>
            返回
          </Button>
        </div>
        <div style={{ marginBottom: '1rem' }}>
          <span style={{ color: 'grey', marginRight: '1rem' }}>
            {article.source} | {article.date.split('T')[0]}
          </span>
          {article.keywords.map((value) => {
            return <Tag key={value}>{value}</Tag>;
          })}
        </div>
        
        <div style={{ paddingBottom: '10px', overflow: 'auto', height: '85%' }}>
          {article.paragraphs.map((p) => {
            return (
              <div key={p.idx} className={style.text}>
                <span>{p.text}</span>
                <span
                  className={style.weight}

                  style={{ color: `rgb(114, 46, 209, ${8 * Math.abs(Number(p.weight))})` }}
                >
                  {Number(p.weight).toFixed(3)}
                </span>
              </div>
            );
          })}
        </div>
      </ProCard>

      {/* 企业产业链图谱 */}
      <ProCard colSpan={10} style={{ borderRadius: '8px', height: '88vh' }} title={<b style={{ fontSize: '18px' }}>企业产业链图谱</b>}>
        <Graphin data={parser(article.graph)} layout={{ type: 'graphin-force' }} fitview></Graphin>
      </ProCard>
    </ProCard>
  );
};

export default OpinionDetail;
